<template>
	<div class="top">
		<h6>优惠卷 / 添加优惠卷</h6>
		<button>返回</button>
		<div class="miao">
			<h4>请填写优惠卷相关信息</h4>
			<br>

			<br><br>
			<span class="example-block">优惠类型</span>
			<el-select v-model="value" class="m-2" placeholder="请选择" size="large" />
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
			<div class="bao">
				优惠卷数量:
				<input placeholder="请输入" clearable class="huo" /> 张
			</div>
			<div class="bao">
				优惠卷面额:
				<input placeholder="请输入" clearable class="huo" /> 元
			</div>
			<div class="bao-o">
				使用门槛:
				<el-radio-group v-model="form.type" class="ml-4">
					<el-checkbox label="1" name="type">无门槛</el-checkbox>
					<el-checkbox label="2" name="type">满</el-checkbox>
				</el-radio-group>
				<input placeholder="请输入" clearable class="huo" /> 元 <span> 可用</span>
			</div>
			<br>
			<div class="bao">
				使用范围
				<!-- <el-radio-group v-model="radio2" class="ml-4">
			      <el-radio label="one" >所有课程</el-radio>
			      <el-radio label="two" >指定课程</el-radio>
			</el-radio-group> -->
				<el-checkbox-group v-model="form.type" class="shu">
					<el-checkbox label="所有课程" name="type" />
					<el-checkbox label="预定课程" name="type" />
				</el-checkbox-group>
			</div>
			<div class="bao">
				有效期:
				<!-- <div class="demo-time-range">
				    <el-time-select
				      v-model="startTime"
				      :max-time="endTime"
				      class="mr-4"
				      placeholder="Start time"
				      start="08:30"
				      step="00:15"
				      end="18:30"
				    />
				    <el-time-select
				      v-model="endTime"
				      :min-time="startTime"
				      placeholder="End time"
				      start="08:30"
				      step="00:15"
				      end="18:30"
				    />
				  </div> -->
				<el-checkbox-group v-model="form.type" class="shu">
					<el-checkbox label="日期范围" name="type" />
				</el-checkbox-group>
				<el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" @change="getList" :disabledDate="disablesDate" />
				<br>
				<el-checkbox-group v-model="form.type" class="shu">
					<el-checkbox label="指定课程" name="type" />
				</el-checkbox-group>
				<input placeholder="请输入" clearable class="huo" /> <span> 天</span>
				<el-row class="mb-4" style="margin-left: 70px;">
				 <el-button type="primary" style="background-color: #38a28a;">立即添加</el-button>
					<el-button plain>取消</el-button>
				</el-row>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		ref
	} from 'vue'
	import {
		reactive
	} from 'vue'

	export default {
		name: 'cao',
		setup() {
			const radio1 = ref('1');
			const radio3 = ref('one');
			const radio4 = ref('one');
			const form = reactive({
				type: [],
			})
			return {
				radio1,
				radio3,
				radio4,
				form
			}
		},
		disablesDate(time) {
			const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 7 //最小时间可选前七天
			const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 1 //最大时间可选今天
			return time.getTime() <= _maxTime || time.getTime() > _minTime
		}
	}
</script>
<style>
	.shu {
		display: inline-block;
	}

	.example-block {
		margin-right: 1rem;
	}

	.bao>p {
		margin-left: 80px;
		font-size: 14px;
	}

	.quan {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: #38a28a;
		margin: auto;
	}

	.shang {
		text-align: center;
		width: 80px;
		height: 80px;
		background-color: #fafafa;
		display: inline-block;
		font-size: 14px;
	}

	.bao {
		width: 100%;
		height: 50px;
		margin-top: 30px;
		margin-bottom: 30px;
		line-height: 50px;
	}

	.bao-o {
		width: 100%;
		height: 50px;
		margin-top: 30px;
		line-height: 50px;
	}

	.huo {
		width: 300px;
		height: 30px;
		border: 1px solid #f1f3f5;
		outline: none;
		padding-left: 5px;

	}

	.top {
		width: 100%;
		height: 100%;
		padding: 30px 30px;
		background-color: #f0f0f0;
	}

	h6,
	h4 {
		float: left;

	}

	.top>button {
		background-color: #38a28a;
		color: white;
		width: 70px;
		height: 30px;
		float: right;
		border: none;
		border-radius: 5px;
		margin-top: -10px;
	}

	.miao {
		width: 100%;
		height: 100vh;
		margin-top: 40px;
		background-color: white;
		padding-top: 30px;
		padding-left: 30px;
	}
</style>
